(function(){

 function getElementPosForMsg(ele){
  var pos = ele.getPosition();
  pos.y -= 20;
  pos.x += ele.offsetWidth + 2;
  return {"left": pos.x, "top": pos.y};
}

function main(){
  $("expand").addEvent("click", expandContent);
  $("projectnew").addEvent("click", newProject);
  $("msgClose").addEvent("click", closeMsg);
}

function expandContent(){
  if($("projectName").getStyle("display") == "none"){
    $("projectName").setStyle("display", "");
    $("projectList").setStyle("display", "");
    $("links").setStyle("margin-left", "290px");
    $("detail").setStyle("margin-left", "300px");
    $("expand").setProperty("src", "/img/fold.gif");
  }
  else{
    $("projectName").setStyle("display", "none");
    $("projectList").setStyle("display", "none");
    $("links").setStyle("margin-left", "0");
    $("detail").setStyle("margin-left", "10px");
    $("expand").setProperty("src", "/img/expand.gif");
  }
}

function closeMsg(){
  $("msgCont").empty();
  $("infowin").setStyle("display", "none");
}

function message(pos, content, width, height){
  closeMsg();
  if((!pos) || (!content))
      return;
  var box = $("infowin");
  box.setStyle("left", pos.left);
  box.setStyle("top", pos.top);

  if($type(content) == "string"){
    $("msgCont").set('html', content);
  }
  else{
    content.inject($("msgCont"));
  }
  width = width || 400;
  height = height || 120;

  box.setStyle("width", width);
  $("msgCont").setStyle("height", height);
  $("msgBorder").setStyle("height", height - 34);
  box.setStyle("display", "inline");
}

function newProject(){
  var pos = getElementPosForMsg($("projectnew"));
  var content = new Element("div");
  Element("h4", {'text':'Create a new project', 'styles': {'margin': '0 0 15px 0'}}).inject(content);
  var inputarea = new Element("div", {'styles': {'margin-left': 15}});
  inputarea.inject(content);
  Element("p", {'text': 'Project name:', 'styles': {'float': 'left', 'margin-top': 2}}).inject(inputarea);
  Element("input", {'type': 'text', 'id': 'proj_name', 'styles': {'width': 200, 'height': 14, 'float': 'right', 'margin-right': 10}}).inject(inputarea);
  Element('div', {'class': 'clear', 'styles': {'margin-bottom': 5}}).inject(inputarea);
  Element("p", {'text': 'Project introduction:', 'styles': {'float': 'left', 'margin-top': 2}}).inject(inputarea);
  Element('textarea', {'id': 'proj_intro', 'styles': {'width': 200, 'height': 80, 'float': 'right', 'margin-right': 10}}).inject(inputarea);
  Element('div', {'class': 'clear', 'styles': {'margin-bottom': 15}}).inject(inputarea);
  Element('input', {'type': 'button', 'value': 'Cancel', 'styles': {'float': 'right', 'margin-right': 10}}).inject(inputarea).addEvent("click", closeMsg);
  Element('input', {'type': 'button', 'value': 'Confirm', 'styles': {'float': 'right', 'margin-right': 20}}).inject(inputarea).addEvent("click", newProjConf);
  message(pos, content, 420, 200);
}

function newProjConf(){
  var projname = $("proj_name").value;
  var projintro = $("proj_intro").value;
  var request = new Request({
                          "url": "/projnew",
                          "data": "projname=" + projname + "&projintro=" + projintro
                        });
  request.addEvent("success", newProjCallback);
  request.send();
  closeMsg();
}
   function newProjCallback(responseText, responseXML){
     var response = JSON.decode(responseText);
     alert(response.result);
   }

main();
}());
